<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment::head('搜索用户')">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文章</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="../../static/layui/layui.css" rel="stylesheet">
    <link href="../../static/css/myui.css" rel="stylesheet">
    <link href="../../static/css/preview.css" rel="stylesheet">
    <script src="../../static/layui/layui.js"></script>
    <script src="../../static/jquery/jquery-3.7.1.min.js"></script>
</head>
<body>

<div style="background: rgb(47,54,60)" th:replace="_fragment::navigate(${user}, 0)">
    <div class="layui-container" style="display:flex;position: relative">
        <div class="myui-logo-container">
            <img style="width: 80%;height: 80%;border-radius: 5px" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
        </div>
        <ul class="layui-nav" style="margin-left: -10px">
            <li class="layui-nav-item">
                <a href="" class="layui-font-18" style="">话题</a>
            </li>
            <li class="layui-nav-item">
                <a href="" class="layui-font-18">文章</a>
            </li>
            <li class="layui-nav-item">
                <a href="" class="layui-font-18">Gitee</a>
            </li>
            <li class="layui-nav-item">
                <a href="" class="layui-font-18">Github</a>
            </li>
        </ul>
        <div style="position: absolute;right: 50px;margin-top: 10px">
            <div style="display: flex">
                <a class="layui-btn" style="margin-right: 20px">
                    <i class="layui-icon layui-icon-add-1"></i>
                    登录</a>
                <button class="layui-btn" id="post-button" style="margin-right: 20px">
                    <i class="layui-icon layui-icon-add-1"></i>
                    发表</button>
                <a href="javascript:;" class="myui-font-color-gray" id="user-info">
                    <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" style="border-radius: 50%;width: 35px;height: 35px ">
                    <span class="layui-font-14" style="color: whitesmoke">小小可小可小可小可小可可</span>
                    <i class="layui-icon layui-icon-down" style="color: whitesmoke"></i>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="layui-container" style="margin-top: 10px;">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md9">
            <div class="layui-card" style="padding: 15px;display: block">
                <div class="layui-row layui-font-16" style="display: flex;padding: 20px">
                    "<h4 th:text="${searchKey}">123</h4>"&nbsp;&nbsp;搜索结果
                </div>
                <div class="layui-row">
                    <div class=" layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">
                                <a>用户</a>
                            </li>
                            <li>
                                <a th:href="@{'/index/search?type=article&key=' + ${searchKey}}">文章</a>
                            </li>
                            <li>
                                <a th:href="@{'/index/search?type=topic&key=' + ${searchKey}}">话题</a>
                            </li>
                        </ul>
                        <div class="layui-tab-content">
                            <!--                        用户搜索-->
                            <div class="layui-tab-item layui-show">
                                <div th:each="user,stat : ${searchUsers}" class="layui-card myui-card layui-row" style="margin-top: 8px;padding: 5px;display: flex;position: relative">
                                    <div class="">
                                        <img class="myui-avatar-small" th:onclick="|window.location.href='/user/' + ${user.id}|" th:src="@{${user.avatar}}" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                                    </div>
                                    <div class="" style="margin-left: 20px">
                                        <a class="layui-row myui-a-tag" th:href="@{${'/user/' + user.id}}" th:text="${user.nickname}">小可小可</a>
                                        <div class="layui-row layui-font-12" style="height: 18px;overflow-y: hidden" th:text="${user.signature}">人很烂什么也没有留个人很烂什么也没</div>
                                    </div>
                                    <div class="" style="position: absolute; right: 30px">
                                        <div class="myui-subscribe-btn list" th:id="${'follow-btn-d-' + user.id}" th:onclick="|followUser('d-', ${user.id})|" th:classappend="${user.follow ? 'active' : ''}">
                                            <i class="layui-icon" th:id="${'follow-icon-d-' + user.id}" th:classappend="${user.follow ? '' : 'layui-icon-add-1'}" th:text="${user.follow ? '已关注' : '关注'}" style="color: white">已关注</i>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-row" style="justify-content: center;display: flex" id="load-more-btn-area">
                                    <button th:classappend="${#lists.size(searchUsers) < 10 ? 'myui-hide' : ''}" id="load-more-btn" class="layui-btn layui-btn-xs">点击加载更多</button>
                                    <button th:classappend="${#lists.size(searchUsers) >= 10 ? 'myui-hide' : ''}" id="load-all" class="layui-btn layui-btn-xs layui-btn-primary">已经到底咯~</button>
                                </div>
                            </div>
                            <div class="layui-tab-item">文章</div>
                            <div class="layui-tab-item">话题</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-md3">
            <th:block th:replace="_fragment::checkPanel(${dailyCheck}, ${checkUsers}, ${user})"></th:block>

            <div class="layui-card">
                <div class="layui-card-header myui-side-title">公告</div>
                <div class="layui-card-body">
                    欢迎访问kkblog开发社区，目前属于demo版本，欢迎注册留言
                </div>
            </div>

            <div class="layui-card myui-side-card">
                <div class="layui-card-header myui-side-title">积分排行</div>
                <div class="layui-card-body">
                    <div class="layui-row" style="margin-bottom: 5px" th:each="u,stat:${ranks}">
                        <div class="layui-col-md2" style="padding-top: 1%">
                            <img class="myui-avatar-small" style="margin: auto;display: block" th:onclick="|window.location.href='/user/' + ${u.id}|" th:src="@{${u.avatar}}" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                        </div>
                        <div class="layui-col-md7" style="text-align: left">
                            <a class="layui-row layui-font-14 myui-a-tag" th:href="@{'/user/' + ${u.id}}" th:text="${u.nickname}">秋天的落叶</a>
                            <div class="layui-row layui-font-12" style="color: #6c6c70"><span th:text="${u.dynamicNumber}">212</span> 帖子 • <span th:text="${u.commentNumber}">12</span> 评论</div>
                        </div>
                        <div class="layui-col-md3 layui-font-14" style="display: flex;padding-top: 2%;color: #6c6c70">
                            <i class="layui-icon layui-icon-dollar" style="font-size: 14px"></i>&nbsp;
                            <span th:text="${u.scores}">32212</span>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="layui-row" style="margin-top: 30px;margin-bottom: 20px;text-align: center;color: darkgrey" th:replace="_fragment::footer">
    © 2024 Powered by Derek
</div>

</body>
</html>

<script th:inline="javascript">
    <!--/*/
    let searchUsers = [[${searchUsers}]];
    let searchKey = [[${searchKey}]];
    let loginUser = [[${user}]];
    /*/-->;

    $(document).ready(function () {
        // 初始话搜索框
        $('#search-key').val(searchKey);
        $('#search-type').val('user');


        $('#load-more-btn').on('click', function () {
            let lastId =  searchUsers[searchUsers.length - 1].id
            let url = '/index/search/more?type=user&lastId=' + lastId + '&key=' + searchKey;
            $.get(url, function(res) {
                if (res.code === 200) {
                    allUsers = res.data;
                    let html = ""
                    for(let i = 0; i < res.data.length; i++) {
                        html += genArticleHtml(res.data[i])
                    }
                    $('#load-more-btn-area').before(html)
                    if (res.data.length < 10) {
                        $('#load-more-btn').addClass('myui-hide')
                        $('#load-all').removeClass('myui-hide')
                    }
                } else {
                    layer.open({
                        title: '系统提示'
                        ,content: res.msg
                    });
                }
            });
        })
    })

    let genArticleHtml = function (user) {
        let followHtml;
        if (user.follow) {
            followHtml =  "<div class='myui-subscribe-btn list active' id='follow-btn-d-" + user.id + "' onclick='followUser(\"d-\", " + user.id + "'>" +
                "                <i class='layui-icon' id='follow-icon-d-" + user.id + "'  style='color: white'>已关注</i>" +
                "          </div>";
        } else {
            followHtml =  "<div class='myui-subscribe-btn list' id='follow-btn-d-" + user.id + "' onclick='followUser(\"d-\", " + user.id + ")'>" +
                "                <i class='layui-icon layui-icon-add-1' id='follow-icon-d-" + user.id + "'  style='color: white'>关注</i>" +
                "          </div>";
        }
        return " <div class='layui-card myui-card layui-row' style='margin-top: 8px;padding: 5px;display: flex;position: relative'>" +
            "        <div class=''>" +
            "            <img class='myui-avatar-small' onclick='window.location.href=\"/user/" + user.id + "\"'  src='" + user.avatar + "'>" +
            "        </div>" +
            "        <div class='' style='margin-left: 20px'>" +
            "            <a class='layui-row myui-a-tag' href='/user/" + user.id + "'>" + user.nickname + "</a>" +
            "            <div class='layui-row layui-font-12' style='height: 18px;overflow-y: hidden'>" + user.signature + "</div>" +
            "        </div>" +
            "        <div class='' style='position: absolute; right: 30px'>" +
            followHtml +
            "        </div>" +
            "    </div>"
    }

    let followUser = function (prefix, id) {
        if (loginUser == null) {
            layer.open({
                title: '系统提示'
                ,content: '请登陆后再操作'
            });
            return;
        }
        if($('#follow-btn-' + prefix + id).hasClass('active')) {
            // 取消关注
            $.get('/follow/undoFollow?userId=' + id, function(res) {
                if (res.code === 200){
                    layer.msg('取消关注成功！', {icon: 1}, function(){});
                    $('#follow-btn-' + prefix + id).removeClass('active');
                    $('#follow-icon-' + prefix + id).addClass('layui-icon-add-1').text('关注');
                    // $('#follow-icon-' + id).text('已关注');
                } else {
                    layer.open({
                        title: '系统提示'
                        ,content: res.msg
                    });
                }
            });
        }
        else {
            $.get('/follow/doFollow?userId=' + id, function(res) {
                if (res.code === 200){
                    layer.msg('关注成功！', {icon: 1}, function(){});
                    $('#follow-btn-' + prefix + id).addClass('active');
                    $('#follow-icon-' + prefix + id).removeClass('layui-icon-add-1').text('已关注');
                    // $('#follow-icon-' + id).text('已关注');
                } else {
                    layer.open({
                        title: '系统提示'
                        ,content: res.msg
                    });
                }
            });
        }
    }
</script>